﻿<link href="~/css/site.css" rel="stylesheet" />
<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js">    </script>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet"
          href="../../css/table.css" type="text/css">
    <script type="text/javascript"
            src="../../javascript/comm/comm.js">
    </script>
    <style>
            /* CSS Document */
            body {
            background-color: #ffffcc;
        }

        .el-form-item__content {
            margin-left: 0px !important;
        }

        .el-form-item__error {
            color: var(--el-color-danger);
            font-size: 12px;
            left: 0;
            line-height: 1;
            padding-top: 2px;
            position: static !important;
            margin-left: 10px;
            top: 100%;
        }

        .el-form-item {
            display: flex;
            --font-size: 14px;
            margin-bottom: 0px !important;
        }
            * {
                FONT-FAMILY: 微软雅黑;
            }

            .resizeDivClass {
                position: relative;
                background-color: #DEDBD6;
                width: 2;
                z-index: 1;
                left: expression(this.parentElement.offsetWidth-1);
                cursor: e-resize;
            }

            A:visited {
                TEXT-DECORATION: none
            }

            A:active {
                TEXT-DECORATION: none
            }

            A:hover {
                TEXT-DECORATION: underline overline
            }

            A:link {
                TEXT-DECORATION: none
            }

            .t {
                LINE-HEIGHT: 1.4
            }

            BODY {
                background-color: #FFFFCC;
                FONT-SIZE: 10pt;
                SCROLLBAR-HIGHLIGHT-COLOR: buttonface;
                SCROLLBAR-SHADOW-COLOR: buttonface;
                SCROLLBAR-3DLIGHT-COLOR: buttonhighlight;
                SCROLLBAR-TRACK-COLOR: #eeeeee;
                SCROLLBAR-DARKSHADOW-COLOR: buttonshadow;
                margin-left: 0px;
                margin-top: 0px;
                margin-right: 0px;
                margin-bottom: 0px;
            }

            TD {
                FONT-FAMILY: ??;
                FONT-SIZE: 9pt
            }

            DIV {
                FONT-FAMILY: ??;
                FONT-SIZE: 9pt
            }

            FORM {
                FONT-FAMILY: ??;
                FONT-SIZE: 9pt
            }

            OPTION {
                FONT-FAMILY: ??;
                FONT-SIZE: 9pt
            }

            P {
                FONT-FAMILY: ??;
                FONT-SIZE: 9pt
            }

            TD {
                FONT-FAMILY: ??;
                FONT-SIZE: 9pt
            }

            BR {
                FONT-FAMILY: ����;
                FONT-SIZE: 9pt
            }

            TEXTAREA {
                BACKGROUND-COLOR: #FFFFCC;
                BORDER-BOTTOM-COLOR: #000000;
                BORDER-BOTTOM-WIDTH: 1px;
                BORDER-LEFT-COLOR: #000000;
                BORDER-LEFT-WIDTH: 1px;
                BORDER-RIGHT-COLOR: #000000;
                BORDER-RIGHT-WIDTH: 1px;
                BORDER-TOP-COLOR: #000000;
                BORDER-TOP-WIDTH: 1px;
                FONT-FAMILY: ����;
                FONT-SIZE: 9pt
            }

            SELECT {
                BACKGROUND-COLOR: #FFFFCC;
                BORDER-BOTTOM-COLOR: #000000;
                BORDER-BOTTOM-WIDTH: 1px;
                BORDER-LEFT-COLOR: #000000;
                BORDER-LEFT-WIDTH: 1px;
                BORDER-RIGHT-COLOR: #000000;
                BORDER-RIGHT-WIDTH: 1px;
                BORDER-TOP-COLOR: #000000;
                BORDER-TOP-WIDTH: 1px;
                FONT-FAMILY: ����;
                FONT-SIZE: 9pt
            }

            .gray {
                CURSOR: pointer;
                FILTER: gray
            }

            .style3 {
                font-size: 16px;
                font-weight: bold;
            }

            .TABLE_STYLE1 {
                border: 1px solid;
                border-color: #000000;
                border-collapse: collapse;
                width: 100%;
            }

            .TABLE_STYLE2 {
                width: 100%;
            }

            .ALL-STYLE {
                border: 1px ridge #666666;
                border-color: #DEDBD6;
            }

            .TR_STYLE1 {
            }

            .style8 {
                color: #000066
            }



            .TD_HANDBOOK_STYLE1 {
                vertical-align: top;
                width: 100%;
                color: #0000FF;
            }

            .TD_STYLE1 {
                background-color: #FFDB6F;
                border-width: 1;
            }

            .TD_STYLE2 {
                border-spacing: 1px;
                background-color: #FFFFBB;
                border-color: #DEDBD6;
                border: 0;
            }

            .TD_STYLE3 {
            }

            .SUBMIT_STYLE1 {
                BORDER-RIGHT: #2C59AA 1px solid;
                PADDING-RIGHT: 2px;
                BORDER-TOP: #2C59AA 1px solid;
                PADDING-LEFT: 2px;
                FONT-SIZE: 12px;
                FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
                BORDER-LEFT: #2C59AA 1px solid;
                CURSOR: pointer;
                COLOR: black;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #2C59AA 1px solid
            }

            .BUTTON_STYLE1 {
                BORDER-RIGHT: #2C59AA 1px solid;
                PADDING-RIGHT: 2px;
                BORDER-TOP: #2C59AA 1px solid;
                PADDING-LEFT: 2px;
                FONT-SIZE: 12px;
                FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
                BORDER-LEFT: #2C59AA 1px solid;
                CURSOR: pointer;
                COLOR: black;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #2C59AA 1px solid
            }

            .RESET_STYLE1 {
                BORDER-RIGHT: #2C59AA 1px solid;
                PADDING-RIGHT: 2px;
                BORDER-TOP: #2C59AA 1px solid;
                PADDING-LEFT: 2px;
                FONT-SIZE: 12px;
                FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
                BORDER-LEFT: #2C59AA 1px solid;
                CURSOR: pointer;
                COLOR: black;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #2C59AA 1px solid
            }

            .RADIO_STYLE1 {
            }

            .CHECKBOX_STYLE1 {
            }

            .SELECT_STYLE1 {
                width: 100%;
            }

            .SELECT_STYLE2 {
                width: 30%;
            }

            .TEXTAREA_STYLE1 {
                width: 100%;
            }

            .DIV_STYLE1 {
                float: right;
                vertical-align: top;
            }

            .DIV_STYLE2 {
                float: center;
                vertical-align: top;
            }

            .INPUT_STYLE1 {
                BACKGROUND-COLOR: #FFFFCC;
                width: 30%
            }

            .INPUT_STYLE2 {
                BACKGROUND-COLOR: #FFFFCC;
                width: 100%
            }

            .FILE_STYLE1 {
                BORDER-RIGHT: #2C59AA 1px solid;
                PADDING-RIGHT: 2px;
                BORDER-TOP: #2C59AA 1px solid;
                PADDING-LEFT: 2px;
                FONT-SIZE: 12px;
                FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
                BORDER-LEFT: #2C59AA 1px solid;
                CURSOR: pointer;
                COLOR: black;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #2C59AA 1px solid
            }

            .btn3_mouseout {
                BORDER-RIGHT: #2C59AA 1px solid;
                PADDING-RIGHT: 2px;
                BORDER-TOP: #2C59AA 1px solid;
                PADDING-LEFT: 2px;
                FONT-SIZE: 12px;
                FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
                BORDER-LEFT: #2C59AA 1px solid;
                CURSOR: pointer;
                COLOR: black;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #2C59AA 1px solid
            }

            .btn3_mouseover {
                BORDER-RIGHT: #2C59AA 1px solid;
                PADDING-RIGHT: 2px;
                BORDER-TOP: #2C59AA 1px solid;
                PADDING-LEFT: 2px;
                FONT-SIZE: 12px;
                FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA);
                BORDER-LEFT: #2C59AA 1px solid;
                CURSOR: pointer;
                COLOR: black;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #2C59AA 1px solid
            }

            .btn3_mousedown {
                BORDER-RIGHT: #FFE400 1px solid;
                PADDING-RIGHT: 2px;
                BORDER-TOP: #FFE400 1px solid;
                PADDING-LEFT: 2px;
                FONT-SIZE: 12px;
                FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
                BORDER-LEFT: #FFE400 1px solid;
                CURSOR: pointer;
                COLOR: black;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #FFE400 1px solid
            }

            .btn3_mouseup {
                BORDER-RIGHT: #2C59AA 1px solid;
                PADDING-RIGHT: 2px;
                BORDER-TOP: #2C59AA 1px solid;
                PADDING-LEFT: 2px;
                FONT-SIZE: 12px;
                FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
                BORDER-LEFT: #2C59AA 1px solid;
                CURSOR: pointer;
                COLOR: black;
                PADDING-TOP: 2px;
                BORDER-BOTTOM: #2C59AA 1px solid
            }

    </style>

</head>

<div id="app">
    <el-form name="configfilefirstkindForm" method="post" ref="ruleFormRef"
             :model="ruleForm"
             :rules="rules"
             label-width="120px"
             class="demo-ruleForm">
        <table width="100%">
            <tr>
                <td>
                    <font color="black">
                        您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--职位设置--职位添加
                    </font>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <div class="mb-4">
                        <el-button type="primary" v-on:click="add()">添加</el-button>
                        <el-button v-on:click="fanhui()">返回</el-button>
                    </div>
                </td>
            </tr>
        </table>

        <table width="100%" border="1" cellpadding=0 cellspacing=1
               bordercolorlight=#848284 bordercolordark=#eeeeee
               class="TABLE_STYLE1">
            <tr>
                <td class="TD_STYLE1" width="19%">
                    职位分类编号
                </td>
                <td>
                    <el-form-item prop="MajorKindId" style="margin-left: 0px;">
                        <el-input v-model="ruleForm.MajorKindId" class="INPUT_STYLE1" readonly/>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    职位分类名称
                </td>
                <td>

                    <el-form-item prop="MajorKind" style="margin-left: 0px;">
                        <el-select v-model="ruleForm.MajorKind" placeholder="请选择I级机构名称" value-key="majorKindId" style="width: 280px" v-on:change="handleChange">
                            <el-option v-for="item in select"
                                       :key="item.majorKindId"
                                       :label="item.majorKindName"
                                       :value="item" />
                        </el-select>
                    </el-form-item>

                    @* <el-form-item prop="MajorKindName" style="margin-left: 0px;">
                        <el-input v-model="ruleForm.MajorKindName" class="INPUT_STYLE1" />
                    </el-form-item> *@
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    职位编号
                </td>
                <td>
                    <el-form-item prop="MajorId" style="margin-left: 0px;">
                        <el-input v-model="ruleForm.MajorId" class="INPUT_STYLE1" />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td class="TD_STYLE1">
                    职位昵称
                </td>
                <td>
                    <el-form-item prop="MajorName" style="margin-left: 0px;">
                        <el-input v-model="ruleForm.MajorName" class="INPUT_STYLE1" />
                    </el-form-item>
                </td>
            </tr>
        </table>
    </el-form>
</div>


<script>
    const { createApp, ref, reactive } = Vue
    const { ElMessage } = ElementPlus
            var app = createApp({
                        setup() {
                   const ruleForm = reactive({
                       MajorKind: null,
                MfkId:0,
                MajorKindId:"",
                MajorKindName:"",
                MajorId:"",
                MajorName:""
            })
            let ruleFormRef = ref(null);//表单id

            const select = ref([])//分类下拉框数据
            //表单验证规则
             const rules = reactive({
            MajorKindId: [
                { required: true, message: '职位分类编号不能位空', trigger: 'blur' },
            ],
            MajorKind: [
                { required: true, message: '职位分类名称不能位空', trigger: 'blur' },
            ],
            MajorId:[
                { required: true, message: '职位编号不能为空', trigger: 'blur' },
            ],
            MajorName:[
                { required: true, message: '职位昵称编号', trigger: 'blur' },
            ],
        })

            function fanhui(){
                window.location.href="/CM/Index1"
            }
            //下拉框数据
            
            function selectOpiton() {
                axios.get("/CM/CMSelectOpiton").then(res => {
                    select.value = res.data;
                    console.info(select.value)
                }).catch(Error => {
                    console.info(Error)
                })
            }

            selectOpiton();

            function add(){
                ruleFormRef.value.validate((valid,fields)=>{
                    if(valid){
                        axios.post("/CM/CMAddAsync1", null, {
                            params:ruleForm
                    }).then(res=>{
                        var i =res.data
                        if (i == 1) {
                            console.info("添加成功")
                            ElMessage({
                            type: 'success',
                            message: '添加成功！'
                        });
                            window.location.href="/CM/Index1"
                        } else {
                            console.info("添加失败")
                            ElMessage({
                            type: 'error',
                            message: '添加失败！'
                        });
                        }
                    }).catch(err=>{
                        ElMessage({
                            type: 'error',
                            message: '添加失败！'+err
                        });
                            console.info("CMAddAsync报错,报错信息:" + err);
                    })
                    }

                })

            }
            function handleChange(){
                let submitData = {};

                // 合并除了 firstKind 以外的所有属性到 submitData
                for (const key in ruleForm) {
                    if (key !== 'MajorKind') {
                        submitData[key] = ruleForm[key];
                    }
                }

                // 如果需要单独提取 firstKindId 和 firstKindName 到 submitData
                if (ruleForm.MajorKindId && ruleForm.MajorKind.majorKindId) {
                    submitData.MajorKindId = ruleForm.MajorKind.majorKindId;
                }
                if (ruleForm.MajorKindName && ruleForm.MajorKind.majorKindName) {
                    submitData.MajorKindName = ruleForm.MajorKind.majorKindName;
                }
                ruleForm.MajorKindId = ruleForm.MajorKind.majorKindId
                ruleForm.MajorKindName = ruleForm.MajorKind.majorKindName
                console.info(submitData)
            }
                     return {
                         add,
                         ruleForm,
                         fanhui,
                         ruleFormRef,
                         rules,
                select, handleChange


                    }
                }
            })
            app.use(ElementPlus)
            app.mount("#app");
</script>
